  <!-- 客户资讯查询 -->
<template>
       <div>
           <bfe-dialog :title="$t('stm.exemptConfig.CstIdQuery')" :visible.sync="showFlag" @close="handCancel" :close-on-click-modal="false" width="60%">
               <div>
                   <div class="searchForm">
                       <bfe-form ref="formObj" class="container" :rules="formRules" :model="formObj" label-position="left" v-loading="loading">
                           <!-- 銀行名稱 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.bankId')" prop="bankId" :label-width="language === 'zh_TW' ? '76px' : '121px'">
                              <bfe-select  v-model="formObj.bankId" :placeholder="$t('stm.validateTip.pleaseInput')"  size="small"  style="width: 210px;margin-left: 10px;">
                                 <bfe-option v-for="(item, index) in bankIdObj[language]" :key="item.key + index" :label="item.value" :value="item.key" />
                              </bfe-select>  
                           </bfe-form-item>
                            <!-- 客戶名稱 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.cstName')" prop="cstName" :label-width="language === 'zh_TW' ? '76px' : '121px'" >
                               <bfe-input v-model="formObj.cstName" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                           </bfe-form-item>
                            <!-- 客戶号 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.cstId')" prop="cstId" :label-width="language === 'zh_TW' ? '76px' : '121px'" >
                               <bfe-input v-model="formObj.cstId" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                           </bfe-form-item>
                           <!-- 客戶类型 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.cstType')" prop="cstType" :label-width="language === 'zh_TW' ? '76px' : '93px'">
                              <bfe-select  v-model="formObj.cstType" :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small"  style="width: 210px;margin-left: 10px;">
                                 <bfe-option v-for="(item, index) in selectObj['cstType'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                              </bfe-select>   
                           </bfe-form-item>
   
                           <!-- 證件號 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.certNo')" prop="certNo" :label-width="language === 'zh_TW' ? '76px' : '121px'" >
                               <bfe-input v-model="formObj.certNo" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                           </bfe-form-item>
                           <!-- 證件類型 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.certType')" prop="certType" :label-width="language === 'zh_TW' ? '76px' : '93px'">
                              <bfe-select  v-model="formObj.certType" :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small"  style="width: 210px;margin-left: 10px;">
                                 <bfe-option v-for="(item, index) in selectObj['certType'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                              </bfe-select>   
                           </bfe-form-item>
                           <!-- 是否涉黑 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.isBlack')" prop="isBlack" :label-width="language === 'zh_TW' ? '76px' : '93px'">
                              <bfe-select  v-model="formObj.isBlack" :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small"  style="width: 210px;margin-left: 10px;">
                                 <bfe-option v-for="(item, index) in selectObj['isPepOrBlack'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                              </bfe-select>   
                           </bfe-form-item>
                           <!-- 是否政要 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.isPep')" prop="isPep" :label-width="language === 'zh_TW' ? '76px' : '93px'">
                              <bfe-select  v-model="formObj.isPep" :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small"  style="width: 210px;margin-left: 10px;">
                                 <bfe-option v-for="(item, index) in selectObj['isPepOrBlack'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                              </bfe-select>   
                           </bfe-form-item>                                                                       
                           <!-- 風險等級 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.riskLevel')" prop="riskLevel" :label-width="language === 'zh_TW' ? '76px' : '93px'">
                              <bfe-select  v-model="formObj.riskLevel" :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small"  style="width: 210px;margin-left: 10px;">
                                 <bfe-option v-for="(item, index) in selectObj['risklevel'][language]" :key="item.key + index" :label="item.value" :value="item.key" />
                               </bfe-select>        
                           </bfe-form-item>
                           <!-- 名 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.lName')" prop="lName" :label-width="language === 'zh_TW' ? '76px' : '121px'" >
                               <bfe-input v-model="formObj.lName" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                           </bfe-form-item>
                           <!-- 姓 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.fName')" prop="fName" :label-width="language === 'zh_TW' ? '76px' : '121px'" >
                               <bfe-input v-model="formObj.fName" type="input" :placeholder="$t('stm.validateTip.pleaseInput')" size="small" style="width: 210px;margin-left: 10px;"></bfe-input>
                           </bfe-form-item>   
                           <!-- 開戶日期开始 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.createDtStart')" prop="createDtStart"  :label-width="language === 'zh_TW' ? '76px' : '121px'">
                               <bfe-date-picker  v-model="formObj.createDtStart" type="date" :editable="true"  :placeholder="$t('stm.validateTip.pleaseSelect')"  size="small" style="width: 210px;margin-left: 10px;" format ></bfe-date-picker>
                           </bfe-form-item>
                            <!-- 開戶日期结束 -->
                           <bfe-form-item :label="$t('stm.exemptConfig.createDtEnd')" prop="createDtEnd"  :label-width="language === 'zh_TW' ? '76px' : '121px'">
                               <bfe-date-picker v-model="formObj.createDtEnd" type="date" :editable="true"  :placeholder="$t('stm.validateTip.pleaseSelect')" size="small" style="width: 210px;margin-left: 10px;"  format></bfe-date-picker>
                           </bfe-form-item>                                 
                       </bfe-form>
                       <bfe-button type="primary" @click="handQuery" :loading="loading">{{ $t('stm.btn.query') }}</bfe-button>
                       <bfe-button @click="handReset">{{ $t('stm.btn.reset') }}</bfe-button>
                   </div>
                   <RadioTable ref="radioTable" v-if="showFlag" :columns="CstIdQueryList" :hasSearch="true" :searchObj="{...formObj}" api="_01_STM002EXEMPT1100" optCode="STM002GET1103" :tabHeight="tabHeight" />
               </div>
               <span slot="footer" class="dialog-footer">
                   <bfe-button @click="handCancel">{{ $t('stm.btn.cancel') }}</bfe-button>
                   <bfe-button type="primary" @click="handConfirm" :loading="loading">{{ $t('stm.btn.confirm') }}</bfe-button>
               </span>
           </bfe-dialog>
       </div>
   </template>
   
   <script>
   import RadioTable from '@stm/components/RadioTable'
   import {CstIdQueryList} from './config'
   import {mapState} from 'vuex';
   
   export default {
       props: {
           selectObj: {
               type: Object,
               default: () => {}
           },
            bankIdObj: {
                  type: Object,
                   default: () => ({
                        zh_TW: [], // 中文繁体语言的数据
                        en_US: []  // 英文语言的数据
                    })
            }
       },    
       components: {
           RadioTable
       },
       data() {
           return {
               showFlag: false,
               CstIdQueryList,
               loading: false,
               tabHeight: document.body.clientHeight * 0.7 - 224,
               formObj: {
                   ehrNo: '', 
                   empeName: '',
                   empeEnName: ''
               },
               formRules: {},
           }
       },
       computed: {
           ...mapState({
               language: state => state.base.language || 'zh_TW',
           }),
           
       },
       methods: {
           initPage(){
               this.showFlag = true
           },
           handCancel(){
               this.handReset()
               this.showFlag = false
           },
           handConfirm(){
               const selectRow = _.cloneDeep(this.$refs.radioTable.selectObj)
               console.log(selectRow, '获取选中的selectRow===')
               let arr = Object.keys(selectRow)
               if(!arr.length){
                   this.$message.warning(this.$t('stm.handleTips.selectOne'))
                   return
               }
               this.$emit('setCstIdInfo', selectRow)
               this.handCancel()
           },
           handQuery(){
               const radioTable = this.$refs.radioTable
               radioTable.getPageData()
           },
           handReset(){
               this.$refs.formObj.resetFields()
               this.$refs.radioTable.selectVal = null
               this.formObj = {}
           }
       }
   }
   </script>
   
   <style lang="less" scoped>
   .searchForm{
       width: 100%; 
       float: left;
       >span{
           display: inline-block;
           height: 30px;
           line-height: 30px;
       }
       margin-bottom: 6px;
       /deep/.giop-button{
           padding: 7px 12px;
       }
       /deep/.giop-form-item{
           float: left;
           margin-right: 52px;
           margin-bottom: 0;
       }
       /deep/.giop-form{
           float: left;
           margin-left: -15px;
       }
       /deep/.giop-button{
           margin-top: 3px;
       }
   }
   </style>